{extend name="../index/public/mlay" /}
{block name="title"}我的推广{/block}
{block name="style"}
<style>
	html {
		height: 100%;
	}

	body {
		height: 100%;
	}

	#app {
		height: 100%;
	}

	.money {
		background-image: url(__TEM_STATIC__/img/my/mybag.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: bottom center;
		display: flex;
		height: 7rem;
		justify-content: space-between;
		padding: 0 3rem;
		padding-top: 1rem;
		font-size: 0.7rem;
	}

	.users {
		background: #fff;
		padding: 0.5rem 1rem;
		font-size: 0.7rem;
		border-radius: 10px;
		margin: 0.5rem 0.5rem;
	}
</style>
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
{/block}
{block name="header"}
{include file="public/header" /}
{/block}
{block name="container"}
<div id="app">
	<div>
		<div style="font-size: 0.7rem;padding-left: 1rem;display: flex;" class="">
			<img style="height: 1rem;margin-right: 0.3rem;" src="__TEM_STATIC__/img/my/my_team.png">
			<div v-cloak>
				<span class="">我的团队</span>
				<span style="font-weight: bold;">({{users}}人)</span>
			</div>
		</div>
		<div v-for="(item,index) in Data" class="users">
			<div @click="click_my_team(item)" style="display: flex;justify-content: space-between;align-items: center;"
				v-cloak>
				<div style="display: flex;align-items: center;" class="">
					<img style="width: 2rem;margin-right: 0.3rem;border-radius: 50%;box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);"
						:src="item.avatar">
					<span v-cloak>{{item.name}}</span>
				</div>
				<span v-cloak>{{item.group}}/{{item.shop}}</span>
				<span v-cloak>团队<span style="font-weight: bold;">({{item.users}}人)</span></span>
			</div>
		</div>
		<div v-show="popup"
			style="display: none;background: rgba(0,0,0,0.5);width: 100%;height: 100vh;position: fixed;top: 0;z-index: 1000;"
			class=""></div>
		<div v-if="this.Data2.length!=0"
			style="position: fixed;z-index: 1000;top: 0;width: 100%;height: 100vh;overflow: hidden;overflow-y: scroll;"
			class="">
			<div style="color: #fff;font-size: 0.7rem;padding: 0.5rem 0.5rem 0rem 0.5rem;position: fixed;width: 100%;"
				class="flex ju_sb">
				<div class="">
					{{name}}的团队
				</div>
				<div @click="click_popup" class="flex ai_center">
					<img style="width: 1rem;" src="__TEM_STATIC__/img/my/return_img.png">
					<span>返回</span>
				</div>
			</div>
			<div style="padding-top: 2rem;" class="">
				<div v-for="(item,index) in Data2" class="users">
					<div style="display: flex;justify-content: space-between;align-items: center;" v-cloak>
						<div style="display: flex;align-items: center;" class="">
							<img style="width: 2rem;margin-right: 0.3rem;border-radius: 50%;box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);"
								:src="item.avatar">
							<span v-cloak>{{item.name}}</span>
						</div>
						<span v-cloak>{{item.group}}/{{item.shop}}</span>
						<span v-cloak>团队<span style="font-weight: bold;">({{item.users}}人)</span></span>
					</div>
				</div>
			</div>
			<div @click="load()" v-if="this.current_page2<=this.last_page2"
				style="font-size: 0.7rem;color: #fff;text-align: center;padding-bottom: 1rem;" class="">
				加载更多
			</div>
			<div v-else style="font-size: 0.7rem;color: #fff;text-align: center;padding-bottom: 1rem;" class="">
				没有更多了
			</div>
		</div>
		<div v-show="pop"
			style="position: fixed;top: 0;display: none;z-index: 1000;width: 100%;text-align: center;color: #fff;"
			class="">
			<div style="color: #fff;font-size: 0.7rem;padding: 0.5rem 0.5rem 0rem 0.5rem;position: fixed;width: 100%;"
				class="flex ju_sb">
				<div class="" v-cloak>
					{{name}}的团队
				</div>
				<div @click="click_popup" class="flex ai_center">
					<img style="width: 1rem;" src="__TEM_STATIC__/img/my/return_img.png">
					<span>返回</span>
				</div>
			</div>
			<p style="padding-top: 1rem;">还没有代理哦</p>
		</div>
	</div>
</div>
{/block}
{block name="copyright"}{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			list: [{
				img: '__TEM_STATIC__/img/my_promotion/my_user.png',
				text: '我的用户'
			}, {
				img: '__TEM_STATIC__/img/my_promotion/the_trade_order.png',
				text: '交易订单'
			}, ],
			Data: [], //数据列表
			Data2: [], //代理数据列表
			users: 0, //我的团队人数
			isLoadding: false,
			page: 1, //页数
			last_page: '', //总页数
			page2: 0, //二列表当前页
			last_page2: '', //二列表总页数
			current_page2: '',
			jibie: 0,
			popup: false,
			pop: false,
			name: '',

		},
		//计算属性	
		computed: {},
		//监听属性
		watch: {},
		//钩子函数	
		created() {
			this.shuju()
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
		},
		methods: {
			handleScroll() {
				//变量 scrollTop 是滚动条滚动时，距离顶部的距离	//变量 windowHeight 是可视区的高度	//变量 scrollHeight 是滚动条的总高度
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				//滚动条到底部的条件
				if (scrollTop + windowHeight >= scrollHeight && vm.isLoadding == false) {
					console.log(`距顶部${scrollTop}可视区高度${windowHeight}滚动条总高度${scrollHeight}`);
					if (this.page < this.last_page) {
						this.page++
						this.shuju();
					}
				}
			},
			shuju: function() {
				var that = this
				var loading = weui.loading('loading', {
					content: '正在载入'
				});
				$.post("", {
					page: that.page

				}, function(res) {
					console.log(res);
					if (vm.page > 1) {
						vm.Data = vm.Data.concat(res.data.items);
						console.log(vm.Data);
					} else {
						vm.Data = res.data.items //数据列表
						vm.users = res.data.users //我的团队人数
						vm.last_page = res.data.last_page //总页数
					}
				});
				loading.hide();
			},
			click_my_team: function(item) {
				let that = this
				that.popup = true
				console.log('我的团队', item);
				that.name = item.name
				that.id = item.id
				$.post("", {
					page: that.page,
					pid: item.id,

				}, function(res) {
					if (res.data.items != 0) {
						vm.Data2 = res.data.items //数据列表
						vm.last_page2 = res.data.last_page
						vm.current_page2 = res.data.current_page2
					} else {
						vm.pop = true
					}
				});
			},
			click_popup() {
				vm.Data2 = []
				vm.popup = false
				vm.pop = false
			},
			load() {
				console.log('加载更多');
				let that = this
				if (vm.current_page2 < vm.last_page2) {
					vm.page2++
				} else {
					return
				}
				$.post("", {
					page: that.page2,
					pid: that.id,

				}, function(res) {
					console.log(res);
					if (res.data.items != 0) {
						vm.Data2 = vm.Data2.concat(res.data.items);
					} else {
						// vm.pop = true
					}
				});
			}

		}
	})
</script>
{/block}
